import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { Button } from "@/ui/button";
import { Card, CardContent } from "@/ui/card";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/form";
import { Input } from "@/ui/input";

/**
 * 安全设置表单字段类型 - 如城池固守，密码安全第一
 */
type FieldType = {
	oldPassword: string; // 旧密码
	newPassword: string; // 新密码
	confirmPassword: string; // 确认密码
};

/**
 * 安全设置标签页 - 如金城汤池，固若金汤守护账户安全
 * 密码乃账户之钥匙，定期更换如更新锁芯，保障安全无虞
 */
export default function SecurityTab() {
	const form = useForm<FieldType>({
		defaultValues: {
			oldPassword: "",
			newPassword: "",
			confirmPassword: "",
		},
	});

	// 处理表单提交 - 如守土有责，更新密码保平安
	const handleSubmit = () => {
		toast.success("更新成功！");
	};

	return (
		<Card>
			<CardContent>
				<Form {...form}>
					<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
						<FormField
							control={form.control}
							name="oldPassword"
							rules={{ required: "旧密码不能为空" }}
							render={({ field }) => (
								<FormItem>
									<FormLabel>旧密码</FormLabel>
									<FormControl>
										<Input type="password" {...field} />
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>

						<FormField
							control={form.control}
							name="newPassword"
							rules={{ required: "新密码不能为空" }}
							render={({ field }) => (
								<FormItem>
									<FormLabel>新密码</FormLabel>
									<FormControl>
										<Input type="password" {...field} />
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>

						<FormField
							control={form.control}
							name="confirmPassword"
							rules={{
								required: "请确认您的新密码",
								validate: (value) => value === form.getValues("newPassword") || "两次输入的密码不一致",
							}}
							render={({ field }) => (
								<FormItem>
									<FormLabel>确认新密码</FormLabel>
									<FormControl>
										<Input type="password" {...field} />
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>

						<div className="flex w-full justify-end">
							<Button type="submit">保存更改</Button>
						</div>
					</form>
				</Form>
			</CardContent>
		</Card>
	);
}
